import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:riverpod_t/page/home/data/model/detail_model_entity.dart';
import 'package:riverpod_t/until/app_util.dart';
import 'package:riverpod_t/widget/custom_button.dart';

class BottomContentWidget extends StatefulWidget {
  final List<CartoonModelDataEp>? epList;

  const BottomContentWidget({
    super.key,
    this.epList,
  });

  @override
  State<BottomContentWidget> createState() => _BottomContentWidgetState();
}

class _BottomContentWidgetState extends State<BottomContentWidget> {
  // 使用更轻量的状态管理
  bool _isScrolling = false;
  final _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  /// 构建目录按钮 - 提取为独立组件减少重建
  Widget _buildCatalogButton() => const _CatalogButton();

  /// 构建阅读按钮 - 使用AnimatedSwitcher优化动画
  Widget _buildReadButton() {
    return Positioned(
      right: 0,
      child: AnimatedSwitcher(
        duration: const Duration(milliseconds: 200),
        transitionBuilder: (child, animation) {
          return ScaleTransition(
            scale: animation,
            child: child,
          );
        },
        child: _isScrolling
            ? _ContinueReadButton(compact: true)
            : _ContinueReadButton(compact: false),
      ),
    );
  }

  /// 构建章节列表
  Widget _buildChapterList() {
    if (AppUtil.isEmpty(widget.epList)) return SizedBox();
    return SizedBox(
      width: double.infinity,
      height: 56.h,
      child: NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          if (notification is ScrollStartNotification) {
            setState(() => _isScrolling = true);
          } else if (notification is ScrollEndNotification) {
            setState(() => _isScrolling = false);
          }
          return false;
        },
        child: ListView.builder(
          controller: _scrollController,
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.only(left: 56.w, right: 80.w),
          itemCount: widget.epList!.length,
          itemBuilder: (context, index) {
            return _ChapterItem(
              title: widget.epList![index].shortTitle,
              isFirst: index == 0,
            );
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(
        color: Colors.white,
        boxShadow: _commonBoxShadow,
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          _buildChapterList(),
          _buildCatalogButton(),
          _buildReadButton(),
        ],
      ),
    );
  }

  static const _commonBoxShadow = [
    BoxShadow(
      color: Colors.black26,
      offset: Offset(0.0, 0.0),
      blurRadius: 12.0,
      spreadRadius: 0.4,
    ),
  ];
}

/// 目录按钮 - 提取为独立组件
class _CatalogButton extends StatelessWidget {
  const _CatalogButton();

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: 0,
      child: Container(
        width: 56.w,
        height: 56.h,
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: _BottomContentWidgetState._commonBoxShadow,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              "assets/images/danmuliang_Normal@2x.png",
              width: 20.w,
              height: 15.w,
              color: Colors.black45,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 2.h),
            Text(
              '目录',
              style: TextStyle(
                color: Colors.black54,
                fontSize: 10.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// 继续阅读按钮 - 提取为独立组件
class _ContinueReadButton extends StatelessWidget {
  final bool compact;

  const _ContinueReadButton({
    required this.compact,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: compact ? 50.w : 80.w,
      height: 56.h,
      child: CustomButton(
        backgroundColor: const Color(0xFF2E5BFF),
        borderRadius: 0,
        onPressed: () {},
        text: compact ? '续读' : '继续阅读',
        textStyle: TextStyle(
          color: Colors.white,
          fontSize: 14.sp,
        ),
      ),
    );
  }
}

/// 章节项
class _ChapterItem extends StatelessWidget {
  final String title;
  final bool isFirst;

  const _ChapterItem({
    required this.title,
    this.isFirst = false,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        left: isFirst ? 0 : 10.w,
        top: 5.h,
        bottom: 5.h,
      ),
      padding: EdgeInsets.symmetric(horizontal: 14.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.h),
        color: const Color(0xFFF3F5FA),
      ),
      alignment: Alignment.center,
      child: Text(
        title,
        style: TextStyle(
          fontSize: 14.sp,
          color: Colors.black45,
        ),
      ),
    );
  }
}